import React from 'react';
import { View } from 'react-native';
import { Lt, Color, Nav, Label, Jpp, Jx, Fimage, Button, Flist, Dialog } from "../_utils";
import { Net } from "../_net"
import { eApp } from '../home/_home';
import { SegProjector, LabelGoodsTitle, FlistHeadLine } from '../_util';
import { cMe } from './_me'

class ViewApp extends React.PureComponent{
    constructor(props){
        super(props);
        this.state = {
            actIdx:0,
        }
    }
    onChange(actIdx){
        if(this.state.actIdx === actIdx){
            return;
        }
        this.setState({actIdx});
        const {onClick} = this.props;
        onClick && onClick(actIdx);
    }
    render(){
        return <View style={{backgroundColor:Color.back}}>
            <View style={{paddingVertical:Lt.pad, flexDirection:"row", justifyContent:"space-around"}}>
            {
                eApp.idxs.map((v, i)=>{
                    const isAct = (i === this.state.actIdx);
                    const backgroundColor = isAct ? Color.theme : "white";
                    const color = isAct ? Color.inverseTheme : Color.c3;
                    return <Button.Pure2 key={i} onPress={ this.onChange.bind(this,i)}
                        title={eApp.names[v]}
                        style={{backgroundColor, fontSize:Lt.c16, color}}
                    />
                })
            }
            </View>
        </View>
    }
}

// 我的订单
export class Order extends React.PureComponent{
    constructor(props){
        super(props);
        this.appIdx = 0;
        this.orderIdx = 0;
        this.flist = null;

        this.onClick = this.onClick.bind(this);
        this.onOrder = this.onOrder.bind(this);
        this.onLoad = this.onLoad.bind(this);
        this.onItem = this.onItem.bind(this);
    }
    static navigationOptions = {
        ...Nav.options,
        headerTitle: "我的订单",
    }
    componentDidMount(){

    }
    // 点击平台按钮
    onClick(appIdx){
        this.appIdx = appIdx;
        if(this.flist){
            this.flist.toTop();
            this.flist.refresh();
        }
    }
    // 点击订单状态（全部/已付款/已结算）
    onOrder(orderIdx){
        this.orderIdx = orderIdx;
        if(this.flist){
            this.flist.toTop();
            this.flist.refresh();
        }
    }
    // 重新请求
    onLoad(params){
        if(this.orderIdx === 3){
            params.add([]);
            return;
        }
        Net.request("oder/myOder", {
            devId : this.appIdx,
            status : this.orderIdx,
            ...params.pagination,
        }, {params}).then(r=>{
            if(r.data){
                params.add(r.data.data);
            }else{
                params.add();
            }
        });
    }
    // 重新加载
    onItem(params){
        const item = params.item;
        return <View style={{flexDirection:"row", padding:Lt.pad}}>
            <Fimage uri={item.img} style={{width:100, height:100}}/>
            <View style={{marginLeft:Lt.margin, justifyContent:"space-between", flexShrink:1}}>
                <LabelGoodsTitle numberOfLines={1}>{item.title}</LabelGoodsTitle>
                <Label style={{fontSize:Lt.c16, color:Color.theme}}>佣金预估: ¥{cMe.toPrice(item.comssion)}</Label>
                <View>
                    <Label style={{color:Color.c9}}>订单号: {item.oderId}</Label>
                    <Label style={{color:Color.c9}}>下单日: {Jx.toDate(item.time * 1000)}</Label>
                </View>
            </View>
        </View>
    }
    render(){
        return <View style = {{flex:1, backgroundColor:"white"}}>
            <Nav.StatusBar/>
            <ViewApp onClick = {this.onClick} />
            <SegProjector
                // ,"已失效",
                fields={["全部","已付款","已结算"]}
                onChange = {this.onOrder}
            />
            <Flist
                ref = {r=>this.flist=r}
                onLoad = {this.onLoad}
                onItem = {this.onItem}
                ListHeaderComponent = {<FlistHeadLine/>}
                stickyHeaderIndices = {[0]}
            />
        </View>;
    }
}